/**
 * 文档列表项组件
 * 显示单个文档的信息
 */

import React from 'react'
import { List, Button, Tooltip, Divider, Checkbox } from 'antd'
import { FileTextOutlined, DeleteOutlined, VideoCameraOutlined } from '@ant-design/icons'
import type { ContentListItem } from '../../../services/storage/types'
import { ContentType } from '../../../types/document'

export interface DocumentListItemProps {
  document: ContentListItem
  onOpen: () => void
  onDelete: () => void
  onConvertToStoryboard?: () => void
  isSelected?: boolean
  onToggleSelect?: () => void
  selectionMode?: boolean
}

const formatDate = (date: Date): string => {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)

  if (diffMins < 1) {
    return '刚刚'
  } else if (diffMins < 60) {
    return `${diffMins}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  }
}

export const DocumentListItem: React.FC<DocumentListItemProps> = ({
  document,
  onOpen,
  onDelete,
  onConvertToStoryboard,
  isSelected = false,
  onToggleSelect,
  selectionMode = false
}) => {
  const { title, updatedAt, wordCount, preview, type } = document

  const handleClick = () => {
    if (selectionMode && onToggleSelect) {
      onToggleSelect()
    } else {
      onOpen()
    }
  }

  return (
    <List.Item
      style={{
        cursor: 'pointer',
        transition: 'all 0.3s',
        padding: '16px',
        borderRadius: '8px',
        marginBottom: '8px',
        backgroundColor: isSelected ? '#e6f4ff' : 'transparent',
        border: isSelected ? '1px solid #91caff' : '1px solid transparent'
      }}
      onMouseEnter={(e) => {
        if (!isSelected) {
          e.currentTarget.style.backgroundColor = '#f5f5f5'
        }
      }}
      onMouseLeave={(e) => {
        if (!isSelected) {
          e.currentTarget.style.backgroundColor = 'transparent'
        }
      }}
      onClick={handleClick}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', width: '100%', gap: '16px' }}>
        {selectionMode && onToggleSelect && (
          <Checkbox
            checked={isSelected}
            onChange={(e) => {
              e.stopPropagation()
              onToggleSelect()
            }}
            style={{ marginTop: '4px' }}
          />
        )}

        <FileTextOutlined style={{ fontSize: 24, color: '#1890ff', marginTop: '4px' }} />

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 16,
            fontWeight: 500,
            color: '#262626',
            marginBottom: '8px'
          }}>
            {title || '无标题文档'}
          </div>

          <div style={{ color: '#8c8c8c', fontSize: 14, marginBottom: '8px' }}>
            <span>{formatDate(updatedAt)}</span>
            <Divider type="vertical" />
            <span>{wordCount} 字</span>
          </div>

          {preview && (
            <div style={{
              color: '#595959',
              fontSize: 14,
              lineHeight: 1.5,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical'
            }}>
              {preview}
            </div>
          )}
        </div>

        {!selectionMode && (
          <div style={{ display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}>
            {type === ContentType.TEXT_DOCUMENT && onConvertToStoryboard && (
              <Tooltip title="转为分镜">
                <Button
                  type="text"
                  icon={<VideoCameraOutlined />}
                  onClick={(e) => {
                    e.stopPropagation()
                    onConvertToStoryboard()
                  }}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                />
              </Tooltip>
            )}
            <Tooltip title="删除">
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
                onClick={(e) => {
                  e.stopPropagation()
                  onDelete()
                }}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}
              />
            </Tooltip>
          </div>
        )}
      </div>
    </List.Item>
  )
}
